Tables


Tables are one of the most useful things to know how to use as they are not only used to show data in websites but also to align images and hyperlinks. Here is my first example. It is of a table with two rows and two columns with a number in each cell. This is how it was achieved:


<TABLE> <TR> <TD> 1 </TD> <TD> 2 </TD> </TR> <TR> <TD> 3 </TD> <TD> 4 </TD> </TR> </TABLE>


You can probably tell what the tags are for but if you can't I'll tell you:


<TABLE></TABLE> - Denotes the start/end of the table.

<TR></TR> - Denotes the start/end of a row.

<TD></TD> - Denotes the start end of a cell.


Want something a bit more substantial? OK. Press here to see my second example.


This is how it was done:


<TABLE BORDER=1> <TR> <TD> 1 </TD> <TD> 2 </TD> </TR> <TR> <TD> 3 </TD> <TD> 4 </TD> </TR> </TABLE>


Spot the difference? Well it's the 'BORDER=1' in the 'TABLE'. If you want it thicker then change 1 to a higher number.


Want some colour. Press here to see another example.


<TABLE BORDER=1 BGCOLOR=green BORDERCOLOR=red> <TR> <TD> 1 </TD> <TD> 2 </TD> </TR> <TR> <TD> 3 </TD> <TD> 4 </TD> </TR> </TABLE>


As you can see BGCOLOR and BORDERCOLOR have been added to the table tag.


Now here comes the advanced stuff so concentrate. What if you wanted one row to take up three normail columns? Press here to see.


<TABLE BORDER=1 BGCOLOR=green BORDERCOLOR=red> <TD ALIGN=CENTER COLSPAN=3>1 <TR> <TD ALIGN=CENTER>2 <TD ALIGN=CENTER>3 <TD ALIGN=CENTER>4<TR> </TR> </TD> </TABLE>


As you can see 'COLSPAN' was added to the cell in question to tell it that it was to 'span' over three cells. The same thing can be done for rows with

<TD ROWSPAN=#>


Thats it